<script setup lang="ts">
import { computed, onMounted, onUnmounted, PropType, ref, watchEffect } from 'vue'
import echarts, { ECOption } from './config'
import { TScoreData } from '../../Types/echarts'

const chartRef = ref<HTMLElement | null>(null)
let myChart: echarts.ECharts

const props = defineProps({
	width: {
		type: String,
		default: '100%' // 默认值
	},
	height: {
		type: String,
		default: '100%'
	},
	titleShow: {
		type: Boolean,
		default: true
	},
	legendShow: {
		type: Boolean,
		default: true
	},
	seriesRadius: {
		type: String,
		default: '100%'
	},
	data: {
		type: Object as PropType<TScoreData>
	}
})
// console.log(props)

// 定义配置对象
const barOption = computed(
	(): ECOption => ({
		title: {
			text: '考试人数',
			left: 'center',
			show: props.titleShow
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'left',
			show: props.legendShow
		},
		series: [
			{
				name: '参考人数',
				type: 'pie',
				radius: props.seriesRadius,
				data: [
					{ value: 1048, name: '技工学院' },
					{ value: 735, name: '软件学院' },
					{ value: 484, name: '交通学院' },
					{ value: 300, name: '管理学院' }
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	})
)

// console.log(barOption)
// 定义配置对象
const echartsStyle = {
	width: props.width,
	height: props.height,
	option: barOption
}
// console.log(echartsStyle)

function barFun() {
	// 基于准备好的dom，初始化echarts实例
	myChart = echarts.init(chartRef.value)
	// 使用刚指定的配置项options和数据显示图表myChart。
	// myChart.setOption(barOption)
	myChart.setOption(barOption.value)

	console.log(chartRef.value?.offsetHeight)
	console.log(chartRef.value?.offsetWidth)
}

onMounted(() => {
	barFun()

	// 与watch相似
	watchEffect(() => {
		// console.log(props.option)

		myChart.setOption(barOption.value, true) // setOption：option更新后，刷新。true：新的取代旧的
	})
})

// 渲染成功后，销毁
onUnmounted(() => {
	myChart.dispose()
})
</script>

<template>
	<div ref="chartRef" :style="echartsStyle"></div>
</template>

<style scoped>
/*div {*/
/*	box-sizing: border-box;*/
/*	border: 2px solid rgba(161, 154, 154, 0.486);*/
/*}*/
</style>
